<template>
    <div class="video">
        <div class="list">
            <b-row>
                <b-col xl="4" lg="4" md="4" sm="12" v-for="(item,index) in items" :key="index">
                    <div class="item">
                        <div class="mp4">
                            <video :src="item.content" :poster="item.coverImage" controls="controls"></video>
                        </div>
                        <p>{{item.title}}</p>
                        <div class="time">{{item.issueDate | filterDate}}</div>
                    </div>
                </b-col>
            </b-row>
        </div>
        <b-pagination align="center" v-model="currentPage" :total-rows="total" :per-page="perPage"></b-pagination>
    </div>
</template>

<script>
import { GetLists } from '@/api'
import { filterLocaleType, fmtDate } from '@/utils'
export default {
    name: 'report',
  	data () {
		return {
			lanType: 2,
            items: [],
            total: 0,
            perPage: 10,
            currentPage: 1,
		}
    },
    filters:{
        filterDate(date){
            return fmtDate(date)
        }
    },
    mounted(){
		this.lanType = filterLocaleType(this.$i18n.locale)
		this.reset()
    },
    watch:{
		'$i18n.locale'(n, o) {
            this.reset(n)
        },
        currentPage(n){
            this.currentPage = n
            this.fetchData()
        }
	},
    methods:{
        reset(n){
            var local = n || this.$i18n.locale
            this.lanType = filterLocaleType(local)
            if( this.lanType == 2 || this.lanType == 3 ){
                this.lanType = 1
            }
			this.fetchData()
        },
		fetchData(){
			GetLists({
				categoryId: 3,
				lanType: this.lanType,
				page:this.currentPage,
				size:this.perPage
			}).then((res)=>{
                this.items = res.dataList
                this.total = res.totalElements
			})
        }
	}
}
</script>

<style lang="scss" scoped>
.video{
    padding: 40px 10px 0 10px;
    .item{
        margin-bottom: 60px;
        cursor: pointer;
        display: inline-block;
        border: 1px solid #e6e6e6;
        transition: all 0.3s;
        .mp4{
            width: 100%;
            overflow: hidden;
            video{
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }
        }
        p{
            color: #333333;
            height: 40px;
            line-height: 20px;
            margin: 0 20px;
            margin-top: 20px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
        .time{
            margin: 5px 20px 20px;
        }
    }
}
</style>
